<script type="text/javascript" src="jquery.easing.1.3.js" charset="UTF-8"></script>
<script type="text/javascript" src="jquery.galleryview-1.1.js" charset="UTF-8"></script>
<script type="text/javascript" src="jquery.timers-1.1.2.js" charset="UTF-8"></script>
<script type="text/javascript" src="jquery.jqzoom1.0.1.js" charset="UTF-8"></script>

<link type="text/css" rel="stylesheet" href="jqzoom.css" charset="UTF-8" />
<link type="text/css" rel="stylesheet" href="galleryview.css"  charset="UTF-8"/>
<div id="photos" class="galleryview">
 
<#list galleryList as gallery>
	
		<div class="panel" href="${gallery.big}" >
			<img src="${gallery.small}" width="${album_pic_width}" height="${album_pic_height}"/>
		</div>
	
</#list> 

<ul class="filmstrip">
	<#list galleryList as gallery>
		<li><img src="${gallery.thumbnail}" alt="${goods.name}" title="${goods.name}" width="50" height="50"/></li>
 	</#list>
</ul>	

</div>
<script type="text/javascript">
$(document).ready(function(){		
	$(".panel").jqzoom({title:false});
	$('#photos').galleryView({
		panel_width: ${album_pic_width},
		panel_height: ${album_pic_height},
		frame_width: 50,
		frame_height: 50,
		transition_speed: 1200,
		transition_interval:0,
		background_color: 'transparent',
		border: 'none',
		easing: 'easeInOutBack',
		nav_theme: 'dark'
	});

	setTimeout(function(){
		$(".panel").hide();
		$(".panel:first").show();
	},100);

	
	
});

</script>
